<template>
  <div class="app-container">
    <el-table
      :data="listData"
      :span-method="objectSpanMethod"
      border
      style="width: 100% margin-top: 20px"
    >
      <!-- @cell-click="handle" -->
      <el-table-column prop="date" label="时间" width="180"> </el-table-column>
      <el-table-column prop="label" label="品名" width="180"> </el-table-column>
      <template v-for="(item, index) in category">
        <el-table-column :key="index" :label="item.label">
          <!-- <template v-for="(i, idx) in item.children"> -->
          <template v-for="(i, idx) in label">
            <el-table-column
              :prop="'count' + i.label"
              :label="i.label"
              :key="idx"
              v-if="item.id === i.pid"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row['count' + i.label]" @change="handleChange"></el-input>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-button type="" @click="handle(1)">查数据</el-button>
    <el-button type="" @click="handlea(1)">赋值</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      time: new Date(),
      sign: '',
      dialogVisible: false,
      category: [
        {
          id: 1,
          label: '粮食类',
        },
        {
          id: 2,
          label: '调味类',
        },
        {
          id: 3,
          label: '其他类',
        }
      ],
      label: [
        {
          pid: 1,
          label: '大米'
        },
        {
          pid: 1,
          label: '小米'
        },
        {
          pid: 1,
          label: '挂面'
        },
        {
          pid: 2,
          label: '酱油'
        },
        {
          pid: 2,
          label: '醋'
        },
        {
          pid: 3,
          label: '馒头'
        }
      ],
      listData: [
        {
          date: '2022-01-01',
          label: '金额'
          // count0: 1,
          // count1: 2,
          // count2: 3,
          // count3: 4
        },
        {
          date: '2022-01-01',
          label: '数量'
          // count0: 5,
          // count1: 6,
          // count2: 7,
          // count3: 8
        }

      ]
    }
  },
  computed: {
  },
  mounted () {
    // 获取表头
  },
  methods: {
    changeaaa (arr) {
      console.log('arr: ', arr)
      // arr.forEach(item)
    },
    changeMoney (scope) {
      // console.log('scope: ', scope)
      // debugger
      const { $index, row } = scope
      if (($index / 2) === 0) {
        return row.money
      } else {
        return row.count
      }
    },
    handle (row) {
      // console.log('row: ', row)
      // let obj = {}
      // this.label.map((item, index) => {
      //   let k = 'count' + index
      //   obj[k] = ''
      // })
      // console.log('obj: ', obj)
      // this.listData.forEach(item => {
      //   // item = { ...item, ...obj }
      //   item = Object.assign(obj, item)
      // })
      console.log('this.listData: ', this.listData)
    },

    handlea (row) {
      this.listData = [
        {
          date: '2022-01-01',
          label: '金额',
          count0: 1,
          count1: 2,
          count2: 3,
          count3: 4
        },
        {
          date: '2022-01-01',
          label: '数量',
          count0: 5,
          count1: 6,
          count2: 7,
          count3: 8
        },
        {
          date: '2022-02-01',
          label: '金额',
          count0: 1,
          count1: 2,
          count2: 3,
          count3: 4
        },
        {
          date: '2022-02-01',
          label: '数量',
          count0: 5,
          count1: 6,
          count2: 7,
          count3: 8
        }
      ]
      this.listData = [
        {
          count大米: '1',
          count小米: '2',
          count挂面: '3',
          count酱油: '45',
          count醋: '6',
          count馒头: '7',
          date: '2022-01-01',
          label: '金额'
        },
        {
          count大米: '122',
          count小米: '23',
          count挂面: '33',
          count酱油: '454',
          count醋: '63',
          count馒头: '74',
          date: '2022-01-01',
          label: '数量'
        },
        {
          count大米: '1322',
          count小米: '233',
          count挂面: '323',
          count酱油: '4514',
          count醋: '623',
          count馒头: '745',
          date: '2022-02-01',
          label: '金额'
        },
        {
          count大米: '112',
          count小米: '203',
          count挂面: '333',
          count酱油: '4554',
          count醋: '633',
          count馒头: '741',
          date: '2022-02-01',
          label: '数量'
        }
      ]
      console.log('this.listData: ', this.listData)
    },

    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    getHeader () {
      let params = {
        year: this.changeDate(this.time, 'yyyy'),
        month: this.changeDate(this.time, 'mm')
      }
      console.log('params: ', params)
    },

    handleChange (val) {
      console.log('val: ', val)
      // this.getHeader()
    },
    sure () { },
    init (sign) {
      this.sign = sign
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
.top {
  margin-bottom: 20px;
}
.el-button {
  margin-left: 50px;
}
</style>
